<template>
    <div class="video-player">
        <video v-if="videoUrl" controls :src="videoUrl" class="video"></video>
        <div v-else class="black-screen"></div>
    </div>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
    props: {
        apiEndpoint: {
            type: String,
            required: true
        }
    },
    setup(props) {
        const videoUrl = ref('')

        const fetchVideo = async () => {
            try {
                const response = await fetch(props.apiEndpoint)
                const data = await response.json()
                videoUrl.value = data.videoUrl
            } catch (error) {
                console.error('获取视频失败:', error)
            }
        }
        onMounted(fetchVideo)
        return {
            videoUrl
        }
    }
}
</script>

<style scoped>
.video-player {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: black;
}

.video {
    width: 100%;
    height: 100%;
}

.black-screen {
    width: 100%;
    height: 100%;
    background-color: black;
}
</style>
